<!DOCTYPE html>
<html>

	<head>
		<title>客户关系管理系统-销售机会管理</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/bootstrap-theme.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/normalize.min.css" />

		<script src="../../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

		<!--[if lte IE 8]>
			<script src="../../js/html5shiv.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="../../js/respond.min.js" type="text/javascript" charset="utf-8"></script>
		<![endif]-->

		<!-- 界面自定义CSS文件 -->
		<link rel="stylesheet" type="text/css" href="../../css/custom/scrollbar-style.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/custom/html-sale-index.min.css" />

		<!--界面自定义JS文件-->
		<script src="../../js/custom/tip-popover.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/custom/html-sale-index.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>
		<div class="container-fluid">

			<!--TODO 当前页面地理位置 (面包屑导航)-->
			<ul class="breadcrumb">
				<li>营销管理</li>
				<li>销售机会管理</li>
			</ul>

			<!--TODO 搜索表单及工具按钮-->
			<form id="form-search" method="get" class="form-inline">

				<div class="form-group">
					<label class="control-label">客户名称：</label>
					<input class="form-control" type="text" />

					<label class="control-label">概要：</label>
					<input class="form-control" type="text" />

					<label class="control-label">联系人：</label>
					<input class="form-control" type="text" />
				</div>

				<div class="form-group btn-group">
					<button class="btn btn-default">
						<span class="glyphicon glyphicon-search"></span>
						查询
					</button>
					<button class="btn btn-default" type="button" data-toggle="modal" data-target="#modal-add" data-backdrop="false">
						<span class="glyphicon glyphicon-plus"></span>
						新建
					</button>
				</div>

			</form>

			<hr />

			<!--TODO 数据列表-->
			<table class="table table-hover table-bordered">
				<thead class="bg-primary">
					<tr>
						<th>#</th>
						<th>客户名称</th>
						<th class="hidden-xs hidden-sm">概要</th>
						<th class="hidden-xs">联系人</th>
						<th class="hidden-xs">联系电话</th>
						<th class="hidden-xs hidden-sm">创建时间</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>睿智数码</td>
						<td class="hidden-xs hidden-sm">采购笔记本电脑意向</td>
						<td class="hidden-xs">刘先生</td>
						<td class="hidden-xs">13729239239</td>
						<td class="hidden-xs hidden-sm">2017/12/06</td>
						<td>
							<div class="btn-group btn-group-xs" data-id="1">
								<button class="btn btn-default" title="指派">
									<span class="glyphicon glyphicon-hand-right"></span>
									<span class="hidden-xs">指派</span>
								</button>
								<button class="btn btn-default" title="编辑">
									<span class="glyphicon glyphicon-edit"></span>
									<span class="hidden-xs">编辑</span>
								</button>
								<button class="btn btn-default" title="删除">
									<div class="text-danger">
										<span class="glyphicon glyphicon-remove"></span>
										<span class="hidden-xs">删除</span>
									</div>
								</button>
							</div>
						</td>
					</tr>
					<tr>
						<td>2</td>
						<td>睿智数码</td>
						<td class="hidden-xs hidden-sm">采购笔记本电脑意向</td>
						<td class="hidden-xs">刘先生</td>
						<td class="hidden-xs">13729239239</td>
						<td class="hidden-xs hidden-sm">2017/12/06</td>
						<td>
							<div class="btn-group btn-group-xs" data-id="2">
								<button class="btn btn-default" title="指派">
									<span class="glyphicon glyphicon-hand-right"></span>
									<span class="hidden-xs">指派</span>
								</button>
								<button class="btn btn-default" title="编辑">
									<span class="glyphicon glyphicon-edit"></span>
									<span class="hidden-xs">编辑</span>
								</button>
								<button class="btn btn-default" title="删除">
									<div class="text-danger">
										<span class="glyphicon glyphicon-remove"></span>
										<span class="hidden-xs">删除</span>
									</div>
								</button>
							</div>
						</td>
					</tr>
					<tr>
						<td>3</td>
						<td>睿智数码</td>
						<td class="hidden-xs hidden-sm">采购笔记本电脑意向</td>
						<td class="hidden-xs">刘先生</td>
						<td class="hidden-xs">13729239239</td>
						<td class="hidden-xs hidden-sm">2017/12/06</td>
						<td>
							<div class="btn-group btn-group-xs" data-id="3">
								<button class="btn btn-default" title="指派">
									<span class="glyphicon glyphicon-hand-right"></span>
									<span class="hidden-xs">指派</span>
								</button>
								<button class="btn btn-default" title="编辑">
									<span class="glyphicon glyphicon-edit"></span>
									<span class="hidden-xs">编辑</span>
								</button>
								<button class="btn btn-default" title="删除">
									<div class="text-danger">
										<span class="glyphicon glyphicon-remove"></span>
										<span class="hidden-xs">删除</span>
									</div>
								</button>
							</div>
						</td>
					</tr>
					<tr>
						<td>4</td>
						<td>睿智数码</td>
						<td class="hidden-xs hidden-sm">采购笔记本电脑意向</td>
						<td class="hidden-xs">刘先生</td>
						<td class="hidden-xs">13729239239</td>
						<td class="hidden-xs hidden-sm">2017/12/06</td>
						<td>
							<div class="btn-group btn-group-xs" data-id="4">
								<button class="btn btn-default" title="指派">
									<span class="glyphicon glyphicon-hand-right"></span>
									<span class="hidden-xs">指派</span>
								</button>
								<button class="btn btn-default" title="编辑">
									<span class="glyphicon glyphicon-edit"></span>
									<span class="hidden-xs">编辑</span>
								</button>
								<button class="btn btn-default" title="删除">
									<div class="text-danger">
										<span class="glyphicon glyphicon-remove"></span>
										<span class="hidden-xs">删除</span>
									</div>
								</button>
							</div>
						</td>
					</tr>
					<tr>
						<td>5</td>
						<td>睿智数码</td>
						<td class="hidden-xs hidden-sm">采购笔记本电脑意向</td>
						<td class="hidden-xs">刘先生</td>
						<td class="hidden-xs">13729239239</td>
						<td class="hidden-xs hidden-sm">2017/12/06</td>
						<td>
							<div class="btn-group btn-group-xs" data-id="5">
								<button class="btn btn-default" title="指派">
									<span class="glyphicon glyphicon-hand-right"></span>
									<span class="hidden-xs">指派</span>
								</button>
								<button class="btn btn-default" title="编辑">
									<span class="glyphicon glyphicon-edit"></span>
									<span class="hidden-xs">编辑</span>
								</button>
								<button class="btn btn-default" title="删除">
									<div class="text-danger">
										<span class="glyphicon glyphicon-remove"></span>
										<span class="hidden-xs">删除</span>
									</div>
								</button>
							</div>
						</td>
					</tr>
				</tbody>
			</table>

			<!--TODO 数据分页部分-->
			<div class="text-center">
				<ul class="pagination">
					<li class="disabled">
						<a>&lt;</a>
					</li>
					<li class="active">
						<a href="">1</a>
					</li>
					<li>
						<a href="">2</a>
					</li>
					<li>
						<a href="">3</a>
					</li>
					<li>
						<a href="">4</a>
					</li>
					<li>
						<a href="">5</a>
					</li>
					<li>
						<a href="">&gt;</a>
					</li>
				</ul>
			</div>
		</div>

		<!--TODO 添加销售机会modal部分-->
		<div class="modal fade" data-backdrop="false" id="modal-add">
			<div class="modal-dialog modal-lg">
				<form action="" id="form-add" class="modal-content">
					<div class="modal-header">
						<button class="close" data-dismiss="modal">
							<span class="glyphicon glyphicon-remove"></span>
						</button>
						<h3 class="modal-title">新建销售机会</h3>
					</div>
					<div class="modal-body">
						<div class="container-fluid">
							<div class="row form-horizontal">
								<div class="col-md-6">
									<div class="form-group">
										<label class="col-xs-4 control-label">客户名称</label>
										<div class="col-xs-8">
											<input class="form-control" type="text" required="required" autofocus="autofocus" />
										</div>
									</div>

									<div class="form-group">
										<label class="col-xs-4 control-label">联系人</label>
										<div class="col-xs-8">
											<input class="form-control" type="text" />
										</div>
									</div>

									<div class="form-group">
										<label class="col-xs-4 control-label">联系电话</label>
										<div class="col-xs-8">
											<input class="form-control" type="tel" />
										</div>
									</div>

									<div class="form-group">
										<label class="col-xs-4 control-label">概要</label>
										<div class="col-xs-8">
											<textarea class="form-control" style="min-height: 50px;"></textarea>
										</div>
									</div>
								</div>
								<div class="col-md-6">
									<div class="form-group">
										<label class="col-xs-4 control-label">机会来源</label>
										<div class="col-xs-8">
											<input class="form-control" type="text" />
										</div>
									</div>

									<div class="form-group">
										<label class="col-xs-4 control-label">
										成功概率
										<span class="text-muted" id="range_ds_1">(0%)</span>
									</label>
										<div class="col-xs-8">
											<input class="form-control-static" type="range" max="100" min="0" value="0" data-target="#range_ds_1" />
										</div>
									</div>

									<div class="form-group">
										<label class="col-xs-4 control-label">描述</label>
										<div class="col-xs-8">
											<textarea class="form-control" style="min-height: 100px;"></textarea>
										</div>
									</div>
								</div>
							</div>

						</div>
					</div>
					<div class="modal-footer">
						<button class="btn btn-default" type="button" data-dismiss="modal">
							<span class="glyphicon glyphicon-remove"></span>
							关闭
						</button>
						<button class="btn btn-primary">
							<span class="glyphicon glyphicon-save"></span>
							确定
						</button>
					</div>
				</form>
			</div>
		</div>

		<!--TODO 修改销售机会modal部分-->
		<div class="modal fade" data-backdrop="false" id="modal-edit">
			<div class="modal-dialog modal-lg">
				<form action="" id="form-edit" class="modal-content">
					<div class="modal-header">
						<button class="close" data-dismiss="modal">
							<span class="glyphicon glyphicon-remove"></span>
						</button>
						<input type="hidden" name="id" />
						<h3 class="modal-title">
							编辑销售机会
							<small>【<span id="edit-title-id"></span>】</small>
						</h3>
					</div>
					<div class="modal-body">
						<div class="container-fluid">
							<div class="row form-horizontal">
								<div class="col-md-6">
									<div class="form-group">
										<label class="col-xs-4 control-label">客户名称</label>
										<div class="col-xs-8">
											<input class="form-control" type="text" required="required" autofocus="autofocus" value="睿智数码" />
										</div>
									</div>

									<div class="form-group">
										<label class="col-xs-4 control-label">联系人</label>
										<div class="col-xs-8">
											<input class="form-control" type="text" value="刘先生" />
										</div>
									</div>

									<div class="form-group">
										<label class="col-xs-4 control-label">联系电话</label>
										<div class="col-xs-8">
											<input class="form-control" type="tel" value="13729239239" />
										</div>
									</div>

									<div class="form-group">
										<label class="col-xs-4 control-label">概要</label>
										<div class="col-xs-8">
											<textarea class="form-control" style="min-height: 50px;">采购笔记本电脑意向</textarea>
										</div>
									</div>
								</div>
								<div class="col-md-6">
									<div class="form-group">
										<label class="col-xs-4 control-label">机会来源</label>
										<div class="col-xs-8">
											<input class="form-control" type="text" value="地面广告" />
										</div>
									</div>

									<div class="form-group">
										<label class="col-xs-4 control-label">
										成功概率
										<span class="text-muted" id="range_et_1">(80%)</span>
									</label>
										<div class="col-xs-8">
											<input class="form-control-static" type="range" max="100" min="0" value="80" data-target="#range_et_1" />
										</div>
									</div>

									<div class="form-group">
										<label class="col-xs-4 control-label">描述</label>
										<div class="col-xs-8">
											<textarea class="form-control" style="min-height: 100px;">这是一个潜在客户</textarea>
										</div>
									</div>
								</div>
							</div>

						</div>
					</div>
					<div class="modal-footer">
						<button class="btn btn-default" type="button" data-dismiss="modal">
							<span class="glyphicon glyphicon-remove"></span>
							关闭
						</button>
						<button class="btn btn-primary">
							<span class="glyphicon glyphicon-edit"></span>
							确定
						</button>
					</div>
				</form>
			</div>
		</div>
	</body>

</html>